import React, {memo, useState} from "react";
import {Link} from "react-router-dom";

import "./index.css";
import ExperimentName from "../experimentName/ExperimentName";

export default memo(function PageNavigation(props) {
  const {navContent} = props;
  const [navIndex, setNavIndex] = useState(0);  //  导航点击索引

  return (
    <div className="pageNavigation">
      <ul>
        {
          navContent.map((item, index) => (
            <Link key={item.content} to={item.path} replace>
              <li className={"pageNavItem " + (index === navIndex ? "activeNav" : "")}
                  onClick={() => setNavIndex(index)}
              >
                {item.content}
              </li>
            </Link>
          ))
        }
      </ul>
      <ExperimentName/>
    </div>
  );
});